<!--
 * @Author: susu 1628469970@qq.com
 * @Date: 2023-08-13 17:35:34
 * @LastEditors: susu 1628469970@qq.com
 * @LastEditTime: 2023-08-13 17:39:30
 * @FilePath: \css_demos\web\SVG\svg旋转动画.htm
 * @Description: http://www.bootstrapmb.com/item/12976/preview
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background: #110f0c
    }

    .svg {
        position: relative;
        width: 200px;
        height: 200px;
        display: inline-block
    }

    .svg svg {
        width: 200px;
        height: 200px
    }

    .svg.muted {
        opacity: .5
    }

    .svg.click::before,
    .svg.click::after {
        position: absolute;
        width: 10px;
        height: 10px;
        opacity: .75
    }

    .svg.click::after {
        content: '';
        top: 15%;
        right: 15%;
        border-bottom: 1px solid #ffa500;
        border-left: 1px solid #ffa500
    }

    .svg.click::before {
        content: '';
        bottom: 15%;
        left: 15%;
        border-top: 1px solid #ffa500;
        border-right: 1px solid #ffa500
    }

    a {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        color: #000;
        padding: 1em;
        background-color: #ffa500;
        font-family: 'Monospace';
        text-decoration: none
    }
</style>

<body>
    <div class="svg click"><svg id="b1">
            <desc>Created with Snap</desc>
            <defs>
                <rect width="10" height="10" class="svg---mgr"></rect>
            </defs>
            <circle cx="100" cy="100" r="47.7464829275686" style="stroke-width: 2;" fill="rgba(0,0,0,0)"
                stroke="#ffa500"></circle>
            <circle cx="100" cy="100" r="47.7464829275686" fill="rgba(0,0,0,0)" stroke="#ffa500"
                transform="matrix(-0.9983,0.0581,-0.0581,-0.9983,205.6453,194.0163)"
                style="stroke-width: 6; stroke-dasharray: 5, 70;"></circle>
        </svg></div>
    <div class="svg click"><svg id="b2">
            <desc>Created with Snap</desc>
            <defs></defs>
            <circle cx="100" cy="100" r="47.7464829275686" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 2;"></circle>
            <circle cx="100" cy="100" r="44.563384065730695" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 6; stroke-dasharray: 70;" transform="matrix(-1,0,0,-1,200,200)"></circle>
            <circle cx="100" cy="100" r="54.11268065124442" fill="none" stroke="#ffa500" transform="matrix(1,0,0,1,0,0)"
                style="stroke-width: 0; stroke-dasharray: 85;"></circle>
        </svg></div>
    <div class="svg click"><svg id="b7">
            <desc>Created with Snap</desc>
            <defs></defs>
            <circle cx="100" cy="100" r="47.7464829275686" fill="rgba(0,0,0,0)" stroke="#ffa500"
                transform="matrix(0,1,-1,0,200,0)"
                style="stroke-width: 16; stroke-opacity: 1; stroke-dasharray: 8, 67;"></circle>
            <circle cx="100" cy="100" r="47.7464829275686" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 2;"></circle>
            <circle cx="100" cy="100" r="41.38028520389279" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 1;"></circle>
            <circle cx="100" cy="100" r="50.92958178940651" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 10; stroke-opacity: 0.65; stroke-dasharray: 3.2;" transform="matrix(1,0,0,1,0,0)">
            </circle>
            <circle cx="100" cy="100" r="3.183098861837907" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 1;"></circle>
        </svg></div>
    <div class="svg click"><svg id="b3">
            <desc>Created with Snap</desc>
            <defs></defs>
            <circle cx="100" cy="100" r="25.464790894703256" fill="rgba(0,0,0,0)" stroke="#ffa500"
                transform="matrix(1,0,0,1,0,0)" style="stroke-width: 2; stroke-dasharray: 53.3333, 26.6667;"></circle>
            <circle cx="100" cy="100" r="6.366197723675814" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 2;"></circle>
            <g transform="matrix(1,0.0003,-0.0003,1,0.0264,-0.0264)"></g>
            <g transform="matrix(0.9999,0.0116,-0.0116,0.9999,1.1651,-1.1517)"></g>
            <g transform="matrix(0.9992,0.0391,-0.0391,0.9992,3.9831,-3.8304)"></g>
            <g transform="matrix(0.9991,0.0434,-0.0434,0.9991,4.4374,-4.2487)"></g>
            <g transform="matrix(0.9971,0.0767,-0.0767,0.9971,7.9642,-7.3751)"></g>
            <g transform="matrix(0.9921,0.1258,-0.1258,0.9921,13.3753,-11.7862)"></g>
            <g transform="matrix(0.958,0.2869,-0.2869,0.958,32.889,-24.4834)"></g>
            <g transform="matrix(0.9258,0.3781,-0.3781,0.9258,45.2321,-30.3859)"></g>
            <g transform="matrix(0.8793,0.4763,-0.4763,0.8793,59.6946,-35.5562)"></g>
            <g transform="matrix(0.8203,0.5719,-0.5719,0.8203,75.1624,-39.2232)"></g>
            <g transform="matrix(0.7395,0.6732,-0.6732,0.7395,93.3693,-41.2658)"></g>
            <g transform="matrix(0.6453,0.764,-0.764,0.6453,111.8693,-40.9224)"></g>
            <g transform="matrix(-0.2357,0.9718,-0.9718,-0.2357,220.7515,26.3856)"></g>
            <g transform="matrix(-0.3286,0.9445,-0.9445,-0.3286,227.3076,38.4145)"></g>
            <g transform="matrix(-0.9659,0.2589,-0.2589,-0.9659,222.4785,170.7037)"></g>
            <g transform="matrix(-0.9927,0.1204,-0.1204,-0.9927,211.3157,187.2286)"></g>
            <g transform="matrix(-0.6953,-0.7187,0.7187,-0.6953,97.657,241.4019)"></g>
            <g transform="matrix(-0.6036,-0.7973,0.7973,-0.6036,80.6239,240.0877)"></g>
            <g transform="matrix(-0.5042,-0.8636,0.8636,-0.5042,64.0539,236.7767)"></g>
            <g transform="matrix(-0.0872,-0.9962,0.9962,-0.0872,9.0963,208.3352)"></g>
            <g transform="matrix(0.0067,-1,1,0.0067,-0.6645,199.3311)"></g>
            <g transform="matrix(0.3694,-0.9293,0.9293,0.3694,-29.8655,155.9907)"></g>
            <g transform="matrix(0.4379,-0.899,0.899,0.4379,-33.6933,146.1096)"></g>
            <g transform="matrix(0.5064,-0.8623,0.8623,0.5064,-36.8697,135.5904)"></g>
            <g transform="matrix(0.5737,-0.819,0.819,0.5737,-39.2773,124.5325)"></g>
            <g transform="matrix(0.6289,-0.7775,0.7775,0.6289,-40.6391,114.8538)"></g>
            <g transform="matrix(0.7994,-0.6008,0.6008,0.7994,-40.0204,80.143)"></g>
            <g transform="matrix(0.8311,-0.5562,0.5562,0.8311,-38.7233,72.5074)"></g>
            <g transform="matrix(0.8577,-0.5142,0.5142,0.8577,-37.1862,65.6495)"></g>
            <g transform="matrix(0.8827,-0.47,0.47,0.8827,-35.2655,58.7298)"></g>
            <g transform="matrix(0.9045,-0.4265,0.4265,0.9045,-33.0989,52.2015)"></g>
            <g transform="matrix(0.9223,-0.3865,0.3865,0.9223,-30.88,46.4236)"></g>
            <g transform="matrix(0.9385,-0.3453,0.3453,0.9385,-28.3783,40.6788)"></g>
            <g transform="matrix(0.9734,-0.2293,0.2293,0.9734,-20.2667,25.5963)"></g>
            <g transform="matrix(0.9794,-0.202,0.202,0.9794,-18.1348,22.2557)"></g>
            <g transform="matrix(0.9847,-0.1745,0.1745,0.9847,-15.9158,18.9845)"></g>
            <g transform="matrix(0.9889,-0.1488,0.1488,0.9889,-13.7675,15.9943)"></g>
            <g transform="matrix(0.9922,-0.125,0.125,0.9922,-11.7117,13.2793)"></g>
            <g transform="matrix(0.9946,-0.1042,0.1042,0.9946,-9.8799,10.9696)"></g>
            <g transform="matrix(0.9965,-0.0842,0.0842,0.9965,-8.061,8.7705)"></g>
            <g transform="matrix(0.9978,-0.0661,0.0661,0.9978,-6.3909,6.8283)"></g>
            <g transform="matrix(0.9987,-0.051,0.051,0.9987,-4.9695,5.2297)"></g>
            <g transform="matrix(0.9993,-0.037,0.037,0.9993,-3.6331,3.7702)"></g>
            <g transform="matrix(0.9997,-0.0252,0.0252,0.9997,-2.489,2.5526)"></g>
            <g transform="matrix(0.9999,-0.0156,0.0156,0.9999,-1.549,1.5734)"></g>
            <g transform="matrix(1,-0.0039,0.0039,1,-0.385,0.3865)"></g>
            <g transform="matrix(1,-0.0061,0.0061,1,-0.6099,0.6136)"></g>
            <g transform="matrix(1,-0.0012,0.0012,1,-0.1237,0.1238)"></g>
            <g transform="matrix(1,0,0,1,0,0)"></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g transform="matrix(1,0.0019,-0.0019,1,0.1874,-0.1871)"></g>
            <g transform="matrix(0.9998,0.018,-0.018,0.9998,1.8186,-1.7861)"></g>
            <g transform="matrix(0.9987,0.0501,-0.0501,0.9987,5.1371,-4.8858)"></g>
            <g transform="matrix(0.9986,0.0526,-0.0526,0.9986,5.4007,-5.1236)"></g>
            <g transform="matrix(0.996,0.0895,-0.0895,0.996,9.3557,-8.5523)"></g>
            <g transform="matrix(0.9897,0.1434,-0.1434,0.9897,15.3755,-13.308)"></g>
            <g transform="matrix(0.9498,0.3128,-0.3128,0.9498,36.2981,-26.2619)"></g>
            <g transform="matrix(0.9162,0.4007,-0.4007,0.9162,48.446,-31.6897)"></g>
            <g transform="matrix(0.866,0.5,-0.5,0.866,63.3981,-36.6027)"></g>
            <g transform="matrix(0.7985,0.6019,-0.6019,0.7985,80.34,-40.0481)"></g>
            <g transform="matrix(0.7176,0.6965,-0.6965,0.7176,97.8849,-41.4055)"></g>
            <g transform="matrix(0.6122,0.7907,-0.7907,0.6122,117.8588,-40.2892)"></g>
            <g transform="matrix(-0.4308,0.9024,-0.9024,-0.4308,233.3259,52.8385)"></g>
            <g transform="matrix(-0.6139,0.7894,-0.7894,-0.6139,240.3274,82.4441)"></g>
            <g transform="matrix(-0.9764,0.2161,-0.2161,-0.9764,219.2452,176.0302)"></g>
            <g transform="matrix(-0.9971,0.0765,-0.0765,-0.9971,207.3565,192.0575)"></g>
            <g transform="matrix(-0.6692,-0.7431,0.7431,-0.6692,92.6147,241.2284)"></g>
            <g transform="matrix(-0.5808,-0.8141,0.8141,-0.5808,76.6738,239.4844)"></g>
            <g transform="matrix(-0.1071,-0.9942,0.9942,-0.1071,11.2871,210.1364)"></g>
            <g transform="matrix(-0.0636,-0.998,0.998,-0.0636,6.5616,206.1568)"></g>
            <g transform="matrix(0.0357,-0.9994,0.9994,0.0357,-3.5041,196.3685)"></g>
            <g transform="matrix(0.3912,-0.9203,0.9203,0.3912,-31.1508,152.9101)"></g>
            <g transform="matrix(0.4585,-0.8887,0.8887,0.4585,-34.7213,143.0137)"></g>
            <g transform="matrix(0.5256,-0.8507,0.8507,0.5256,-37.6349,132.5061)"></g>
            <g transform="matrix(0.5844,-0.8115,0.8115,0.5844,-39.5869,122.7046)"></g>
            <g transform="matrix(0.642,-0.7667,0.7667,0.642,-40.871,112.4645)"></g>
            <g transform="matrix(0.8091,-0.5877,0.5877,0.8091,-39.6777,77.8612)"></g>
            <g transform="matrix(0.838,-0.5456,0.5456,0.838,-38.366,70.7624)"></g>
            <g transform="matrix(0.8654,-0.5011,0.5011,0.8654,-36.6498,63.5744)"></g>
            <g transform="matrix(0.8894,-0.4571,0.4571,0.8894,-34.6516,56.7686)"></g>
            <g transform="matrix(0.9103,-0.4139,0.4139,0.9103,-32.4221,50.3575)"></g>
            <g transform="matrix(0.9273,-0.3742,0.3742,0.9273,-30.1575,44.6916)"></g>
            <g transform="matrix(0.9428,-0.3334,0.3334,0.9428,-27.6211,39.0668)"></g>
            <g transform="matrix(0.975,-0.2223,0.2223,0.975,-19.7309,24.7371)"></g>
            <g transform="matrix(0.9811,-0.1937,0.1937,0.9811,-17.4762,21.264)"></g>
            <g transform="matrix(0.986,-0.1668,0.1668,0.986,-15.2756,18.0761)"></g>
            <g transform="matrix(0.9899,-0.1416,0.1416,0.9899,-13.1523,15.1675)"></g>
            <g transform="matrix(0.9928,-0.1196,0.1196,0.9928,-11.2437,12.6797)"></g>
            <g transform="matrix(0.9952,-0.0981,0.0981,0.9952,-9.3305,10.2958)"></g>
            <g transform="matrix(0.9969,-0.0786,0.0786,0.9969,-7.5536,8.1729)"></g>
            <g transform="matrix(0.9981,-0.0621,0.0621,0.9981,-6.0214,6.408)"></g>
            <g transform="matrix(0.9989,-0.0467,0.0467,0.9989,-4.5573,4.7751)"></g>
            <g transform="matrix(0.9994,-0.034,0.034,0.9994,-3.3462,3.4621)"></g>
            <g transform="matrix(0.9997,-0.0227,0.0227,0.9997,-2.2491,2.3008)"></g>
            <g transform="matrix(1,-0.0096,0.0096,1,-0.9575,0.9667)"></g>
            <g transform="matrix(1,-0.0031,0.0031,1,-0.3063,0.3073)"></g>
            <g transform="matrix(1,-0.0042,0.0042,1,-0.419,0.4208)"></g>
            <g transform="matrix(1,-0.0019,0.0019,1,-0.1871,0.1874)"></g>
            <g transform="matrix(1,0,0,1,0,0)">
                <circle cx="100" cy="100" r="47.7464829275686" fill="rgba(0,0,0,0)" stroke="#ffa500"
                    transform="matrix(-1,0,0,-1,200,200)" style="stroke-width: 2; stroke-dasharray: 100, 200;"></circle>
                <circle cx="100" cy="100" r="35.01408748021697" fill="rgba(0,0,0,0)" stroke="#ffa500"
                    transform="matrix(-1,0,0,-1,200,200)" style="stroke-width: 2; stroke-dasharray: 73.3333, 146.667;">
                </circle>
                <circle cx="100" cy="100" r="41.38028520389279" fill="rgba(0,0,0,0)" stroke="#ffa500"
                    transform="matrix(-1,0,0,-1,200,200)"
                    style="stroke-width: 14; stroke-dasharray: 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 240;">
                </circle>
            </g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g></g>
            <g>
                <circle cx="100" cy="100" r="47.7464829275686" fill="rgba(0,0,0,0)" stroke="#ffa500"
                    style="stroke-width: 2; stroke-dasharray: 100, 200;"></circle>
                <circle cx="100" cy="100" r="35.01408748021697" fill="rgba(0,0,0,0)" stroke="#ffa500"
                    style="stroke-width: 2; stroke-dasharray: 73.3333, 146.667;"></circle>
                <circle cx="100" cy="100" r="41.38028520389279" fill="rgba(0,0,0,0)" stroke="#ffa500"
                    style="stroke-width: 14; stroke-dasharray: 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 4.33333, 1.44444, 240;">
                </circle>
            </g>
        </svg></div>
    <div class="svg muted"><svg id="b5">
            <desc>Created with Snap</desc>
            <defs></defs>
            <circle cx="100" cy="100" r="47.7464829275686" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 2; stroke-opacity: 1; stroke-dasharray: 56, 4;"></circle>
            <circle cx="100" cy="100" r="44.563384065730695" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 2;"></circle>
            <circle cx="100" cy="100" r="12.732395447351628" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 2; stroke-dasharray: 12, 4;"></circle>
            <circle cx="100" cy="100" r="0.3183098861837907" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 2;"></circle>
        </svg></div>
    <div class="svg muted"><svg id="b6">
            <desc>Created with Snap</desc>
            <defs></defs>
            <circle cx="100" cy="100" r="47.7464829275686" fill="rgba(0,0,0,0)" stroke="#ffa500"
                transform="matrix(0.7071,0.7071,-0.7071,0.7071,100,-41.4214)"
                style="stroke-width: 10; stroke-opacity: 0.25; stroke-dasharray: 75;"></circle>
            <circle cx="100" cy="100" r="47.7464829275686" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 2; stroke-opacity: 0.5; stroke-dasharray: 75;"></circle>
            <circle cx="100" cy="100" r="31.830988618379067" fill="rgba(0,0,0,0)" stroke="#ffa500"
                transform="matrix(0.7071,0.7071,-0.7071,0.7071,100,-41.4214)"
                style="stroke-width: 2; stroke-opacity: 0.25;"></circle>
            <circle cx="100" cy="100" r="0.7957747154594768" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 2;"></circle>
            <circle cx="100" cy="100" r="31.830988618379067" fill="rgba(0,0,0,0)" stroke="#ffa500"
                transform="matrix(1,-0.0087,0.0087,1,-0.8688,0.8765)"
                style="stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1, 99;"></circle>
            <circle cx="100" cy="100" r="39.78873577297384" fill="rgba(0,0,0,0)" stroke="#ffa500"
                transform="matrix(1,-0.0087,0.0087,1,-0.8688,0.8765)"
                style="stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1, 124;"></circle>
        </svg></div>
    <div class="svg muted"><svg id="b8">
            <desc>Created with Snap</desc>
            <defs></defs>
            <circle cx="100" cy="100" r="44.563384065730695" fill="#ffa500" stroke="none"
                transform="matrix(0.9914,0.1305,-0.1305,0.9914,13.9081,-12.1971)"
                style="fill-opacity: 0.2; stroke-width: 10; stroke-opacity: 1;"></circle>
            <circle cx="100" cy="100" r="47.7464829275686" fill="rgba(0,0,0,0)" stroke="#ffa500"
                transform="matrix(0.9914,0.1305,-0.1305,0.9914,13.9081,-12.1971)"
                style="stroke-width: 10; stroke-opacity: 1; stroke-dasharray: 60, 15;"></circle>
            <circle cx="100" cy="100" r="9.549296585513721" fill="rgba(0,0,0,0)" stroke="#ffa500"
                transform="matrix(0.9962,-0.0872,0.0872,0.9962,-8.335,9.0961)"
                style="stroke-width: 10; stroke-opacity: 1; stroke-dasharray: 1.5, 13.5;"></circle>
            <circle cx="100" cy="100" r="4.7746482927568605" fill="#ffa500" style=""></circle>
            <circle cx="100" cy="100" r="31.830988618379067" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 2; stroke-opacity: 0.1;"></circle>
        </svg></div>
    <div class="svg muted"><svg id="b9">
            <desc>Created with Snap</desc>
            <defs></defs>
            <circle cx="100" cy="100" r="47.7464829275686" fill="rgba(0,0,0,0)" stroke="#ffa500"
                transform="matrix(0.5,-0.866,0.866,0.5,-36.6025,136.6025)"
                style="stroke-width: 2; stroke-dasharray: 50;"></circle>
            <circle cx="100" cy="100" r="47.7464829275686" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 15; stroke-dasharray: 50;"></circle>
            <circle cx="100" cy="100" r="52.521131220325465" fill="rgba(0,0,0,0)" stroke="#ffa500"
                transform="matrix(0.5,-0.866,0.866,0.5,-36.6025,136.6025)"
                style="stroke-width: 2; stroke-dasharray: 55;"></circle>
            <circle cx="100" cy="100" r="42.97183463481174" fill="rgba(0,0,0,0)" stroke="#ffa500"
                transform="matrix(0.891,0.454,-0.454,0.891,56.2984,-34.4997)"
                style="stroke-width: 10; stroke-dasharray: 6.75, 83.25;"></circle>
            <circle cx="100" cy="100" r="39.78873577297384" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 15; stroke-dasharray: 4.16667, 33.3333, 4.16667, 41.6667;"></circle>
            <circle cx="100" cy="100" r="33.42253804929802" fill="rgba(0,0,0,0)" stroke="#ffa500"
                style="stroke-width: 2; stroke-dasharray: 35;"></circle>
        </svg></div>
    <script src="../jquery相关/js/jq.js"></script>
    <script src="./snap.svg-min.js"></script>
    <script>
        ; var s1 = Snap("#b1")
            , s2 = Snap("#b2")
            , s5 = Snap("#b5")
            , s6 = Snap("#b6")
            , s7 = Snap("#b7")
            , s8 = Snap("#b8")
            , s9 = Snap("#b9")
            , s3 = Snap("#b3")
            , c = 200 / 2
            , clr = "orange";
        function r(a) {
            return a / (2 * Math.PI)
        }
        function s(a, b, f, e) {
            f ? f = f : f = 5;
            var d = [f, (a / b) - f];
            e ? d = [(a / b) - f, f] : d = d;
            return d
        }
        function rot(a) {
            return ["r-" + (a * 2 / 3), c, c]
        }
        var c11 = s1.circle(c, c, r(300)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
        });
        var c12 = s1.circle(c, c, r(300)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 6,
            strokeDasharray: s(300, 4, 5),
            transform: ["r-" + 5 * (2 / 3), c, c]
        });
        c12.node.onclick = function () {
            c12.attr({
                r: r(300),
                strokeDasharray: s(300, 4, 5),
                transform: ["r-" + 5 * (2 / 3), c, c]
            });
            Snap.animate(300, 360, function (a) {
                var b = a - 300;
                c12.attr({
                    r: r(a),
                    strokeDasharray: s(a, 4, 5),
                    transform: ["r" + ((b * 1.5) - (5 * (2 / 3))), c, c]
                })
            }, 800, timingFunc2, function () {
                c12.animate({
                    transform: ["r" + (180 - (5 * (2 / 3))), c, c]
                }, 800, mina.bounce, function () {
                    Snap.animate(360, 300, function (a) {
                        c12.attr({
                            r: r(a),
                            strokeDasharray: s(a, 4, 5)
                        })
                    }, 800, timingFunc2)
                })
            })
        }
            ;
        var c21 = s2.circle(c, c, r(300)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
        });
        var c22 = s2.circle(c, c, r(280)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 6,
            strokeDasharray: String((280 / 4)),
        });
        var c23 = s2.circle(c, c, r(340)).attr({
            fill: "none",
            stroke: clr,
            strokeWidth: 0,
            strokeDasharray: String((340 / 4)),
            transform: ["r90", c, c]
        });
        c22.node.onclick = function () {
            c22.attr({
                r: r(280),
                strokeDasharray: String((280 / 4)),
                transform: ["r-0", c, c]
            });
            Snap.animate(280, 250, function (a) {
                c22.attr({
                    r: r(a),
                    strokeDasharray: String((a / 4)),
                    transform: ["r-" + (Math.abs(a - 280) * 3), c, c]
                });
                c23.attr({
                    strokeWidth: (Math.abs(a - 280) * 0.2),
                    transform: ["r" + (Math.abs(a - 280) * 3 * 2), c, c]
                })
            }, 800, timingFunc2, function () {
                Snap.animate(250, 280, function (a) {
                    c22.attr({
                        r: r(a),
                        strokeDasharray: String((a / 4)),
                    });
                    c23.attr({
                        strokeWidth: (Math.abs(a - 280) * 0.2),
                        transform: ["r" + (Math.abs(a - 280) * 6 * 2), c, c]
                    })
                }, 800, timingFunc2);
                Snap.animate(90, 180, function (a) {
                    c22.attr({
                        transform: ["r-" + a, c, c]
                    })
                }, 800, timingFunc2)
            })
        }
            ;
        function repeat(a, b) {
            var e = [];
            for (var d = 0; d < b; d++) {
                e = e.concat(a)
            }
            return e
        }
        var c31 = s3.circle(c, c, r(300)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
            strokeDasharray: [String((300 / 3)), String((300 * (2 / 3)))]
        });
        var c32 = s3.circle(c, c, r(220)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
            strokeDasharray: [String((220 / 3)), String((220 * (2 / 3)))]
        });
        var c34 = s3.circle(c, c, r(160)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
            strokeDasharray: [(160 / 3), (160 / 6)],
            transform: ["r" + 0, c, c]
        });
        var c35 = s3.circle(c, c, r(40)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
        });
        var c36 = s3.circle(c, c, r(300)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
            strokeDasharray: [String((300 / 3)), String((300 * (2 / 3)))],
            transform: ["r" + 180, c, c]
        });
        var c37 = s3.circle(c, c, r(220)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
            strokeDasharray: [String((220 / 3)), String((220 * (2 / 3)))],
            transform: ["r" + 180, c, c]
        });
        var c38 = s3.circle(c, c, r(260)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 14,
            strokeDasharray: repeat([String(260 / 180), String(260 / 60)], 15).concat(String(260 / 180)).concat(String(240)),
            transform: ["r" + 180, c, c]
        });
        var c33 = s3.circle(c, c, r(260)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 14,
            strokeDasharray: repeat([String(260 / 180), String(260 / 60)], 15).concat(String(260 / 180)).concat(String(240))
        });
        c33.node.onclick = function () {
            Snap.animate(0, 100, function (b) {
                var a = s3.group(c31, c32, c33, c36, c37, c38);
                c31.attr({
                    r: r(300 + b),
                    strokeDasharray: [String(((300 + b) / 3)), String(((300 + b) * (2 / 3)))]
                });
                c33.attr({
                    r: r(260 + (b / 2)),
                    strokeWidth: 14 + (b / 6),
                    strokeDasharray: repeat([String((260 + b) / 180), String((260 + b) / (60 + (b / (100 / 15))))], 15).concat(String((260 + b) / 180)).concat(String(240))
                });
                c36.attr({
                    r: r(300 + b),
                    strokeDasharray: [String(((300 + b) / 3)), String(((300 + b) * (2 / 3)))]
                });
                c38.attr({
                    r: r(260 + (b / 2)),
                    strokeWidth: 14 + (b / 6),
                    strokeDasharray: repeat([String((260 + b) / 180), String((260 + b) / (60 + (b / (100 / 15))))], 15).concat(String((260 + b) / 180)).concat(String(240))
                });
                c34.attr({
                    transform: ["r-" + (b * 3.6), c, c]
                });
                c35.attr({
                    r: r(40 + b)
                });
                a.attr({
                    transform: ["r" + b * 3.6, c, c]
                })
            }, 800, timingFunc2, function () {
                Snap.animate(100, 0, function (b) {
                    var a = s3.group(c31, c32, c33);
                    c31.attr({
                        r: r(300 + b),
                        strokeDasharray: [String(((300 + b) / 3)), String(((300 + b) * (2 / 3)))]
                    });
                    c33.attr({
                        r: r(260 + (b / 2)),
                        strokeWidth: 14 + (b / 6),
                        strokeDasharray: repeat([String((260 + b) / 180), String((260 + b) / (60 + (b / (100 / 15))))], 15).concat(String((260 + b) / 180)).concat(String(240))
                    });
                    c36.attr({
                        r: r(300 + b),
                        strokeDasharray: [String(((300 + b) / 3)), String(((300 + b) * (2 / 3)))]
                    });
                    c38.attr({
                        r: r(260 + (b / 2)),
                        strokeWidth: 14 + (b / 6),
                        strokeDasharray: repeat([String((260 + b) / 180), String((260 + b) / (60 + (b / (100 / 15))))], 15).concat(String((260 + b) / 180)).concat(String(240))
                    });
                    c35.attr({
                        r: r(40 + b)
                    });
                    c34.attr({
                        transform: ["r-" + (b * 1.8), c, c]
                    })
                }, 800, timingFunc2)
            })
        }
            ;
        var c51 = s5.circle(c, c, r(300)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
            strokeOpacity: 1,
            strokeDasharray: String((300 / 5) - 4) + " 4"
        });
        var c52 = s5.circle(c, c, r(280)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
        });
        var c53 = s5.circle(c, c, r(80)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
            strokeDasharray: String((80 / 5) - 4) + " 4"
        });
        var c53 = s5.circle(c, c, r(2)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2
        });
        var c61 = s6.circle(c, c, r(300)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 10,
            strokeOpacity: 0.25,
            strokeDasharray: String((300 / 4)),
            transform: "r45, 100, 100"
        });
        var c62 = s6.circle(c, c, r(300)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
            strokeOpacity: 0.5,
            strokeDasharray: String((300 / 4))
        });
        var c63 = s6.circle(c, c, r(200)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
            strokeOpacity: 0.25,
            transform: "r45, 100, 100"
        });
        var c64 = s6.circle(c, c, r(5)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2
        });
        var c65 = s6.circle(c, c, r(200)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 8,
            strokeLinecap: "round",
            strokeDasharray: "1 " + String((200 / 2) - 1),
            transform: "r-.5, 100, 100"
        });
        var c66 = s6.circle(c, c, r(250)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 4,
            strokeLinecap: "round",
            strokeDasharray: "1 " + String((250 / 2) - 1),
            transform: "r-.5, 100, 100"
        });
        var c71 = s7.circle(c, c, r(300)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 16,
            strokeOpacity: 1,
            strokeDasharray: [8, ((300 / 4) - 8)],
            transform: "r, 100, 100"
        });
        var c72 = s7.circle(c, c, r(300)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
        });
        var c73 = s7.circle(c, c, r(260)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 1,
        });
        var c74 = s7.circle(c, c, r(320)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 10,
            strokeOpacity: 0.65,
            strokeDasharray: (320 / 100)
        });
        var c75 = s7.circle(c, c, r(20)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 1,
        });
        c74.node.onclick = function () {
            c71.attr({
                transform: ["r0", c, c]
            });
            c74.attr({
                transform: ["r0", c, c]
            });
            Snap.animate(0, 100, function (a) {
                c74.attr({
                    r: r(320 - a),
                    strokeDasharray: ((320 - a) / 100)
                });
                c71.attr({
                    r: r(300 + (a)),
                    strokeDasharray: [8, (((300 + (a)) / 4) - 8)],
                })
            }, 800, timingFunc2);
            c74.animate({
                transform: ["r-" + (360), c, c]
            }, 3500, timingFunc3);
            c71.animate({
                transform: ["r" + (135), c, c]
            }, 1200, timingFunc, function () {
                c71.animate({
                    transform: ["r" + (225), c, c]
                }, 500, timingFunc2, function () {
                    c71.animate({
                        transform: ["r" + (90), c, c]
                    }, 1000, timingFunc)
                });
                Snap.animate(0, 100, function (a) {
                    c74.attr({
                        r: r(220 + (a)),
                        strokeDasharray: ((220 + (a)) / 100),
                    });
                    c71.attr({
                        r: r(400 - (a)),
                        strokeDasharray: [8, (((400 - (a)) / 4) - 8)],
                    })
                }, 1500, timingFunc)
            })
        }
            ;
        var c81 = s8.circle(c, c, r(280)).attr({
            fill: clr,
            fillOpacity: 0.2,
            stroke: "none",
            strokeWidth: 10,
            strokeOpacity: 1,
            transform: "r7.5, 100, 100"
        });
        var c82 = s8.circle(c, c, r(300)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 10,
            strokeOpacity: 1,
            strokeDasharray: String((300 / 4) - (300 / 20)) + " " + String((300 / 20)),
            transform: "r7.5, 100, 100"
        });
        var c83 = s8.circle(c, c, r(60)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 10,
            strokeOpacity: 1,
            strokeDasharray: String((60 / 40)) + " " + String((60 / 4) - (60 / 40)),
            transform: "r-5, 100, 100"
        });
        var c84 = s8.circle(c, c, r(30)).attr({
            fill: clr
        });
        var c84 = s8.circle(c, c, r(200)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
            strokeOpacity: 0.1
        });
        var c91 = s9.circle(c, c, r(300)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
            strokeDasharray: String((300 / 6)),
            transform: ["r-60", c, c]
        });
        var c92 = s9.circle(c, c, r(300)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 15,
            strokeDasharray: String((300 / 6)),
        });
        var c93 = s9.circle(c, c, r(330)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
            strokeDasharray: String((330 / 6)),
            transform: ["r-60", c, c]
        });
        var c93 = s9.circle(c, c, r(270)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 10,
            strokeDasharray: [String(270 / 40), String((270 / 3) - (270 / 40))],
            transform: ["r27", c, c]
        });
        var c93 = s9.circle(c, c, r(250)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 15,
            strokeDasharray: [String(250 / 60), String((250 / 6) - (250 / 30)), String(250 / 60), String((250 / 6))],
        });
        var c93 = s9.circle(c, c, r(210)).attr({
            fill: "transparent",
            stroke: clr,
            strokeWidth: 2,
            strokeDasharray: String(210 / 6),
        });
        var bezier = function (f, h, g, i, e) {
            var a = function (j) {
                var k = 1 - j;
                return 3 * k * k * j * f + 3 * k * j * j * g + j * j * j
            };
            var b = function (j) {
                var k = 1 - j;
                return 3 * k * k * j * h + 3 * k * j * j * i + j * j * j
            };
            var d = function (j) {
                var k = 1 - j;
                return 3 * (2 * (j - 1) * j + k * k) * f + 3 * (-j * j * j + 2 * k * j) * g
            };
            return function (l) {
                var p = l, m, n, o, q, j, k;
                for (o = p,
                    k = 0; k < 8; k++) {
                    q = a(o) - p;
                    if (Math.abs(q) < e) {
                        return b(o)
                    }
                    j = d(o);
                    if (Math.abs(j) < 1e-06) {
                        break
                    }
                    o = o - q / j
                }
                m = 0,
                    n = 1,
                    o = p;
                if (o < m) {
                    return b(m)
                }
                if (o > n) {
                    return b(n)
                }
                while (m < n) {
                    q = a(o);
                    if (Math.abs(q - p) < e) {
                        return b(o)
                    }
                    if (p > q) {
                        m = o
                    } else {
                        n = o
                    }
                    o = (n - m) * 0.5 + m
                }
                return b(o)
            }
        };
        var duration = 200;
        var epsilon = (1000 / 60 / duration) / 4;
        var timingFunction = bezier(0.08, 1.05, 0.95, 0.12, epsilon);
        var timingFunction2 = bezier(0.5, 0.5, 0.5, 0.5, epsilon);
        var timingFunc = bezier(0.75, 0, 0.15, 1, epsilon);
        var timingFunc2 = bezier(0.5, 0, 0, 1, epsilon);
        var timingFunc3 = bezier(0, 0, 0.25, 1, epsilon);
        var collapsed = false;
        $("a").click(function () {
            if (collapsed) {
                $("div").css({
                    position: "relative",
                    display: "inline-block",
                    top: "0",
                    left: "0",
                    transform: "none"
                });
                $("#b2").parent().show();
                $("#b4").parent().show();
                $("#b9").parent().show();
                $("#b8").parent().show();
                collapsed = false
            } else {
                $("div").css({
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%,-50%)"
                });
                $("#b2").parent().hide();
                $("#b4").parent().hide();
                $("#b9").parent().hide();
                $("#b8").parent().hide();
                collapsed = true
            }
        });
    </script>
</body>

</html>